<template>
    <div class="header-container">
        <div class="header-left  flex-box">
            <el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
                <Fold/>
            </el-icon>
            <ul class="flex-box">
                <li
                    v-for="(item,index) in selectMenu"
                    :key="item.path"
                    class="tab flex-box"
                    :class="{selected: route.path === item.path}"


                >
                    <el-icon size="12">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <router-link class="text flex-box" :to="item.path">{{item.name}}</router-link>
                    <el-icon class="close" size="12" @click="closeTab(item,index)">
                        <Close />
                    </el-icon>
                </li>
            </ul>

        </div>
        <div class="header-right">
            <el-dropdown>
                <div class="el-dropdown-link flex-box">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                        <!-- 加载失败后的图片 -->
                        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>

                    </el-avatar>
                    <!-- todo 用户名 -->
                    <p class="user-name">admin</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logout()">注销</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import { computed } from 'vue';

const store = useStore();
// 当前路由对象
const route = useRoute();
const router = useRouter();
const selectMenu = computed(() => store.state.menu.selectMenu);

// 点击关闭tag
const closeTab = (item,index) => {
    store.commit('closeMenu',item);
    // 删除非当前
    if(route.path !== item.path ){

        return
    }
    const selectMenuData = selectMenu.value;

    // 删除最后一项
    if (index === selectMenuData.length){
        // 如果tag只有一个元素
        if (!selectMenuData.length){
            router.push('/')
        } else {
            router.push({
                path: selectMenuData[index - 1].path
        })
        }

    } else{
        // 如果删除是中间位置的tag
        router.push({
            path: selectMenuData[index].path
        })
    }
}
const logout = () => {
    ElMessage.success('用户退出登陆！');
    // 清理token
    localStorage.removeItem('pz_token');

    window.location.href = window.location.origin;
    // 跳转回登陆页面
    //router.push('/login')
    //getItem('pz_token');
}
</script>

<style lang="less" scoped>
    .flex-box {
        display: flex;
        /* 垂直剧中*/
        align-items: center;
        height: 100%;
    }

    .header-container {
        display: flex;
        /* 左右靠边 */
        justify-content: space-between;
        align-items: center;
        height: 100%;
        background-color: #ffffff;
        padding-right: 25px;

        .header-left {
            height: 100%;

            .icon {
                width: 45px;
                height: 100%;
            }

            .icon:hover {
                background-color: #f5f5f5;
                cursor: pointer;
            }
            .tab{
                padding: 0 10px;
                height: 100%;
                .text{
                    margin: 0 5px;
                    color: #000;
                }
                .close{
                    display: none;
                }
                // &如果存在
                &.selected{
                    a{
                        color: #409eff;
                    }
                    i{
                        color: #409eff;
                    }
                    background-color: #f5f5f5;
                }
            }
            .tab:hover{
                background-color: #f5f5f5;
                .close{
                    display: block;
                    cursor: pointer;
                }
            }

        }
        .header-right {
            .user-name {
                margin-left: 10px;
            }
        }
        .a{
            height: 100%;
            color: #333;
            font-size: 15px;
        }
    }
</style>
